<template>
  <div>
    <el-card>
      <el-button type="button" size="small" @click="addVisible = true"
        >添加</el-button
      >
      <el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
        <el-table-column
          prop="title"
          label="标题"
          width="300"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="time" label="时间" width="300">
        </el-table-column>
        <el-table-column prop="thumb" label="宣传图片" width="80">
          <template slot-scope="scope">
            <div v-html="scope.row.thumb"></div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="showReport(scope.row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="editReport(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="deleteReport(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="5"
        :pager-count="11"
        layout="prev, pager, next"
        :total="pageSizeCount"
        @current-change="getAllreport"
      >
      </el-pagination>
    </el-card>
    <!-- 查看宣传报道 -->
    <el-dialog title="查看宣传报道" :visible.sync="dialogFormVisible">
      <el-form :model="showReportForm">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input
            v-model="showReportForm.title"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-input
            v-model="showReportForm.time"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="宣传图片" :label-width="formLabelWidth">
          <div v-html="showReportForm.thumb" class="reportThumb"></div>
        </el-form-item>
        <el-form-item label="宣传文章" :label-width="formLabelWidth">
          <div v-html="showReportForm.content" class="reportContent"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑宣传报道 -->
    <el-dialog title="编辑宣传报道" :visible.sync="exitVisible">
      <el-form :model="editReportForm">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input
            v-model="editReportForm.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editReportForm.createTime"
            type="datetime"
            placeholder="选择时间"
            align="right"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="宣传图片" :label-width="formLabelWidth">
          <editor
            id="label"
            ref="label"
            :editdata="editReportForm.label"
          ></editor>
        </el-form-item>
        <el-form-item label="宣传文章" :label-width="formLabelWidth">
          <editor
            id="content"
            ref="content"
            :editdata="editReportForm.content"
          ></editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exitVisible = false" type="primary">取 消</el-button>
        <el-button
          @click="editReportPost"
          :loading="updataReportLoading"
          type="primary"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加宣传报道 -->
    <el-dialog title="添加宣传报道" :visible.sync="addVisible">
      <el-form :model="reportForm">
        <el-form-item label="宣传信息标题" :label-width="formLabelWidth">
          <el-input v-model="reportForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="宣传时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="reportForm.createTime"
            type="datetime"
            placeholder="选择时间"
            align="right"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="宣传图片" :label-width="formLabelWidth">
          <editor id="proReportimgid" ref="proReportimg"></editor>
        </el-form-item>
        <el-form-item label="宣传信息内容" :label-width="formLabelWidth">
          <editor id="proReportid" ref="proReport"></editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false" type="primary">取 消</el-button>
        <el-button @click="addReport" :loading="addReportLoading" type="primary"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'
import editor from '@/components/Editor.vue'
export default {
  components: {
    editor,
  },
  data() {
    return {
      tableLoading: true,
      pageSizeCount: 0,
      tableData: [],
      reportForm: {
        proId: '',
        content: '',
        title: '',
        createTime: '',
        label: '',
      },
      proID: '',
      formLabelWidth: '100px',
      showReportForm: {
        title: '',
        time: '',
        thumb: '',
        content: '',
      },
      editReportForm: {
        id: '',
        proId: '',
        title: '',
        createTime: '',
        label: '',
        content: '',
      },
      dialogFormVisible: false,
      exitVisible: false,
      addVisible: false,
      updataReportLoading: false,
      addReportLoading: false,
    }
  },
  methods: {
    //日期转化
    formatTime(number, format) {
      var formateArr = ['Y', 'M', 'D', 'h', 'm', 's']
      var returnArr = []
      var date = new Date(number)
      returnArr.push(date.getFullYear())
      returnArr.push(this.formatNumber(date.getMonth() + 1))
      returnArr.push(this.formatNumber(date.getDate()))
      returnArr.push(this.formatNumber(date.getHours()))
      returnArr.push(this.formatNumber(date.getMinutes()))
      returnArr.push(this.formatNumber(date.getSeconds()))

      for (var i in returnArr) {
        format = format.replace(formateArr[i], returnArr[i])
      }
      return format
    },
    //数据转化
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    },
    //添加宣传信息
    async addReport() {
      this.addReportLoading = true
      this.reportForm.proId = this.proID
      this.reportForm.content = this.$refs.proReport.editorContent
      this.reportForm.label = this.$refs.proReportimg.editorContent
      this.reportForm.createTime = this.formatTime(
        this.reportForm.createTime,
        'Y/M/D h:m:s'
      )
      let data = {
        data: this.reportForm,
      }
      let res = await api.proReport.addReport(data)
      this.getAllreport()
      if (res.data !== null) {
        this.$message({
          type: 'success',
          message: '添加成功!',
        })
      } else {
        this.$message({
          message: '添加失败',
          type: 'warning',
        })
      }
      this.addReportLoading = false
      this.addVisible = false
      this.reportForm = {
        proId: '',
        content: '',
        title: '',
        createTime: '',
        label: '',
      }
    },
    //加载全部宣传信息
    async getAllreport(pagesize) {
      this.tableData = []
      let nowpage = pagesize ? pagesize : 1
      let data = {
        id: this.proID,
        page: nowpage,
        size: 5,
      }
      let res = await api.proReport.getReportall(data)
      this.tableLoading = false
      let result = res.data.data.list
      if (result.length !== 0) {
        this.pageSizeCount = parseInt(res.data.data.total)
        console.log(this.pageSizeCount)
        for (let i = 0; i < result.length; i++) {
          this.tableData.push({
            id: result[i].id,
            title: result[i].title,
            time: result[i].createTime,
            thumb: result[i].label,
          })
        }
      }
    },
    //查看宣传报道
    async showReport(val) {
      let data = {
        id: val.id,
      }
      let res = await api.proReport.showReportItem(data)
      this.dialogFormVisible = true
      if (typeof res.data === 'object') {
        let result = res.data[0]
        this.showReportForm.title = result.title
        this.showReportForm.time = result.createTime
        this.showReportForm.thumb = result.label
        this.showReportForm.content = result.content
      } else {
        this.$message.error('服务器错误')
      }
    },
    //删除宣传报道
    deleteReport(val) {
      let data = {
        id: val.id,
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteReportInfo(data)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    async deleteReportInfo(data) {
      let res = await api.proReport.deteleReportItem(data)
      if (res.data === null) {
        this.$message({
          type: 'success',
          message: '删除成功!',
        })
        this.getAllreport()
      }
    },
    //编辑宣传报道
    async editReport(val) {
      let data = {
        id: val.id,
      }
      let res = await api.proReport.showReportItem(data)
      this.exitVisible = true
      if (typeof res.data === 'object') {
        let result = res.data[0]
        ;(this.editReportForm.id = result.id),
          (this.editReportForm.proId = result.proId),
          (this.editReportForm.title = result.title)
        var T = new Date(result.createTime.replace(/\//g, '-'))
        this.editReportForm.createTime = T.getTime()
        this.editReportForm.label = result.label
        this.editReportForm.content = result.content
      } else {
        this.$message.error('服务器错误')
      }
    },
    async editReportPost() {
      this.updataReportLoading = true
      this.editReportForm.content = this.$refs.content.editorContent
      this.editReportForm.label = this.$refs.label.editorContent
      this.editReportForm.createTime = this.formatTime(
        this.editReportForm.createTime,
        'Y/M/D h:m:s'
      )
      let data = {
        data: this.editReportForm,
      }
      let res = await api.proReport.updateReportItem(data)
      if (res.msg === 'success') {
        console.log('编辑成功')
        this.$message({
          message: '编辑成功',
          type: 'success',
        })
        this.getAllreport()
      } else {
        this.$message({
          message: '编辑失败',
          type: 'warning',
        })
      }
      this.exitVisible = false
      this.updataReportLoading = false
    },
  },
  created() {
    // this.proID = this.$route.params.id
    // this.getAllreport()
  },
}
</script>

<style>
.reportThumb img {
  width: 100%;
  height: 200px;
}

.reportContent {
  width: 100%;
  height: auto;
  border: 1px solid #cccccc;
}

.reportContent img {
  width: 500px;
  height: auto;
}
</style>
